<template>
    <view class="popular-services">
      <!-- 标题区域 -->
      <view class="services-header">
        <view class="header-content">
          <text class="title-text">热门服务</text>
          <!-- <text class="subtitle-text">专业服务 · 品质保障</text> -->
        </view>
        <view class="header-decoration">
          <view class="decoration-circle"></view>
          <view class="decoration-circle"></view>
        </view>
      </view>
  
      <!-- 服务卡片容器 -->
      <view class="services-container">
        <!-- 统一网格布局：两列，使用 gap 控制间距，单数最后占满一行 -->
        <view class="grid grid-cols-2 gap-[20rpx]">
          <view 
            v-for="(item, idx) in displayList" 
            :key="item.key"
            :class="[(displayList.length % 2 === 1 && idx === displayList.length - 1) ? 'col-span-2' : 'col-span-1']"
          >
            <view class="service-card" :class="themeClassMap[item.key]">
              <view class="card-content">
                <view class="card-text">
                  <text class="card-title">{{ item.title }}</text>
                  <text class="card-desc">{{ item.desc }}</text>
                </view>
                <view v-if="item.iconType === 'emoji'" class="card-icon">{{ item.iconText }}</view>
                <image v-else-if="item.iconType === 'img'"
                  :src="item.iconSrc"
                  mode="aspectFit"
                  class="w-[60rpx] h-[60rpx] flex-shrink-0 ml-[16rpx]"
                />
              </view>

              <view class="card-tags" :class="item.key === 'elderly' ? 'long-care' : ''">
                <view 
                  v-for="btn in item.btns" 
                  :key="btn.pid"
                  class="card-tag"
                  @click.stop="handleServiceClick(item.key, btn.pid)"
                >{{ btn.name }}</view>
              </view>
            </view>
          </view>
        </view>
        <!-- 第一行：助医中心和助行中心 -->
        <!-- <view class="services-row" v-if="false && enabledServices.has('助医中心')">
          <view class="service-card medical-card" v-if="enabledServices.has('助医中心')">
            <view class="card-content">
              <view class="card-text">
                <text class="card-title">助医中心</text>
                <text class="card-desc">专业医疗咨询与协助</text>
              </view>
              <view class="card-icon">🏥</view>
            </view>
            <view class="card-tags">
              <view class="card-tag" @click.stop="handleServiceClick('medical', '1982618820119552002')">医疗</view>
              <view class="card-tag" @click.stop="handleServiceClick('medical', '1982036400446038018')">照护</view>
              <view class="card-tag" @click.stop="handleServiceClick('medical', '1982627191761592321')">健康</view>
              <view class="card-tag" @click.stop="handleServiceClick('medical', '1982742854299742210')">康复</view>
            </view>
          </view>
  
          <view class="service-card mobility-card" v-if="enabledServices.has('助行中心')">
            <view class="card-content">
              <view class="card-text">
                <text class="card-title">助行中心</text>
                <text class="card-desc">出行辅助与交通支持</text>
              </view>
              <view class="card-icon">♿</view>
            </view>
            <view class="card-tags">
              <view class="card-tag" @click.stop="handleServiceClick('mobility', '1982618820119552002')">医疗</view>
              <view class="card-tag" @click.stop="handleServiceClick('mobility', '1982036400446038018')">照护</view>
              <view class="card-tag" @click.stop="handleServiceClick('mobility', '1971504478850514945')">健康</view>
              <view class="card-tag" @click.stop="handleServiceClick('mobility', '1982742715401170946')">康复</view>
            </view>
          </view>
        </view> -->
  
        <!-- 中间大卡片：个案管理中心 -->
        <!-- <view class="service-card-large case-card" v-if="false && enabledServices.has('老年中心')">
          <view class="card-content">
            <view class="card-main">
              <view class="card-text">
                <text class="card-title">老年中心</text>
                <text class="card-desc">一站式整合型重度失能老年人居家医疗照护服务</text>
              </view>
              <image 
                :src="oldIcon" 
                class="w-[84rpx] h-[84rpx] flex-shrink-0 ml-[16rpx]"
                mode="aspectFit"
              />
            </view>
          </view>
          <view class="card-tags long-care">
              <view class="card-tag" @click.stop="handleServiceClick('elderly', '1947823460310495234')">医疗</view>
              <view class="card-tag" @click.stop="handleServiceClick('elderly', '1982745707185631233')">照护</view>
              <view class="card-tag" @click.stop="handleServiceClick('elderly', '1982747373779742721')">健康</view>
              <view class="card-tag" @click.stop="handleServiceClick('elderly', '1982748698651324417')">康复</view>
            </view>
        </view> -->
  
        <!-- 第三行：母婴中心和老年中心 -->
        <!-- <view class="services-row" v-if="false && enabledServices.has('母婴中心')">
          <view class="service-card maternal-card" v-if="enabledServices.has('母婴中心')">
            <view class="card-content">
              <view class="card-text">
                <text class="card-title">母婴中心</text>
                <text class="card-desc">孕产护理与婴幼儿照护</text>
              </view>
              <image 
                :src="newIcon" 
                class="w-[54rpx] h-[54rpx] flex-shrink-0 ml-[16rpx]"
                mode="aspectFit"
              />
              <view class="mu-wz" @click.stop="handleServiceClick('maternal', '1947830373895024642')">母</view>
              <view class="ying-wz" @click.stop="handleServiceClick('maternal', '1947569813504802817')">婴</view>

            </view>
            <view class="card-tags">
              <view class="card-tag" @click.stop="handleServiceClick('maternal', '1952935222735171586')">医疗</view>
              <view class="card-tag" @click.stop="handleServiceClick('maternal', '1949639687672598530')">照护</view>
              <view class="card-tag" @click.stop="handleServiceClick('maternal', '1982746842185265153')">健康</view>
              <view class="card-tag" @click.stop="handleServiceClick('maternal', '1982748320488681473')">康复</view>
            </view>
          </view>

          <view class="service-card elderly-card" v-if="enabledServices.has('个案中心')">
            <view class="card-content">
              <view class="card-text">
  
                <text class="card-title">个案中心</text>
                <text class="card-desc">个性化服务方案定制</text>
              </view>
              <image 
                :src="caseIcon" 
                class="w-[60rpx] h-[60rpx] flex-shrink-0 ml-[16rpx]"
                mode="aspectFit"
              />
            </view>
            <view class="card-tags">
              <view class="card-tag" @click.stop="handleServiceClick('case', '1982618983395418114')">医疗</view>
              <view class="card-tag" @click.stop="handleServiceClick('case', '1982036400446038018')">照护</view>
              <view class="card-tag" @click.stop="handleServiceClick('case', '1952935222735171586')">健康</view>
              <view class="card-tag" @click.stop="handleServiceClick('case', '1982742854299742210')">康复</view>
            </view>
          </view>
        </view> -->

        <!-- 长期护理保险定点机构照护服务模块 -->
        <view class="long-care-card" v-if="enabledServices.has('长期护理保险定点机构照护服务') && longCareData">
          <view class="card-content">
            <view class="card-main">
              <view class="card-text">
                <text class="card-title">长期护理保险定点机构照护服务</text>
                <!-- <text class="card-desc">定点机构照护服务</text> -->
              </view>
              <!-- <view class="card-icon">🏥</view> -->
            </view>
          </view>
          <view class="long-care-content">
            <!-- 动态渲染分组 -->
            <view 
              v-for="group in longCareData.groupedBtns" 
              :key="group.gid" 
              class="care-category"
            >
              <text class="category-title">{{ group.gid || '其他' }}</text>
              <view class="category-tags-container" v-if="group.gid === '生活照护' || group.gid === '医疗护理'">
                <view 
                  v-for="(row, rowIndex) in chunkArray((group.items || []) as any[], 4)" 
                  :key="rowIndex" 
                  class="category-tags-row"
                >
                  <view 
                    v-for="item in row" 
                    :key="(item as any).pid" 
                    class="care-tag" 
                    @click.stop="handleCareClick((item as any).name, (item as any).pid)"
                  >
                    {{ (item as any).name }}
                  </view>
                </view>
              </view>
              <view v-else class="category-tags-row">
                <view 
                  v-for="item in (group.items || []) as any[]" 
                  :key="(item as any).pid" 
                  class="care-tag" 
                  @click.stop="handleCareClick((item as any).name, (item as any).pid)"
                >
                  {{ (item as any).name }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
  
      <!-- 底部弹出模态框 -->
      <view v-if="showModal" class="modal-overlay" @click="closeModal">
        <view class="modal-content" @click.stop>
          <view class="modal-header">
            <text class="modal-title">{{ currentService?.name }}</text>
            <view class="modal-close" @click="closeModal">
              <text class="close-icon">×</text>
            </view>
          </view>
          
          <view class="modal-body">
            <!-- 加载状态 -->
            <view v-if="loading" class="flex-col-center py-12">
              <view class="text-[32rpx] text-#999">加载中...</view>
            </view>
            <!-- 空数据状态 -->
            <view v-else-if="!loading && serviceList.length === 0" class="flex-col-center pt-6 pb-150rpx">
              <nut-empty />
            </view>
            <!-- 数据列表 -->
            <view v-else class="service-list">
              <good 
                v-for="item in serviceList" 
                :key="item.id" 
                :obj="item" 
                :src="useImage(item.pic || '')"
                @jump="handleItemClick(item)" 
                :validate="'0'"
              />
            </view>
           
          </view>
        </view>
      </view>
    </view>
  </template>
  
  <script setup lang="ts">
  /**
   * 热门服务组件 - 优化版
   * 展示5个服务卡片，包含助医中心、助行中心、个案管理中心、母婴中心、老年中心
   * @description 优化后的设计更加大气、现代和专业，支持底部弹出模态框
   */
  
  import { ref, onMounted, computed } from 'vue'
  import { useImage } from '@/hooks'
  import { useRouterPush } from '@/composables'
  import { useNurseGoods } from '@/service'
  import { request } from '@/service/request'
  import { PlatformUtils } from '@/utils/channel'
  import good from '@/pages/index/components/good.vue'
  import newIcon from '@/assets/img/new.png'
  import oldIcon from '@/assets/img/old.png'
  import caseIcon from '@/assets/img/bao.png'
  import { useConfigStore } from '@/store'
  
  interface ServiceType {
    medical: string
    mobility: string
    case: string
    maternal: string
    elderly: string
    longCare: string
  }
  
  interface GoodsItem {
    id: string | number
    pic?: string
    goods_name?: string
    type_name?: string
    typeName?: string
    unit?: string
    price?: number
    pricenew?: number
    [key: string]: any
  }
  
  interface CurrentService {
    type: keyof ServiceType
    name: string
  }
  
  // 服务类型映射
  const serviceMap: ServiceType = {
    medical: '助医中心',
    mobility: '助行中心',
    case: '个案中心',
    maternal: '母婴中心',
    elderly: '老年中心',
    longCare: '长期护理保险定点机构照护服务'
  }
  
  // 响应式数据
  const showModal = ref(false)
  const currentService = ref<CurrentService | null>(null)
  const serviceList = ref<GoodsItem[]>([])
  const loading = ref(false)
  const selectedCareTag = ref<string>('饮食照护')
  const configStore = useConfigStore()
  const enabledServices = computed(() => new Set(configStore.serviceTextList))
  
  // 动态数据源 - 从接口获取
  const baseList = ref<any[]>([])
  const originalBaseList = [
    {
      key: 'maternal',
      title: '母婴中心',
      desc: '孕产护理与婴幼儿照护',
      iconType: 'img',
      iconSrc: newIcon,
      btns: [
        { name: '医疗', pid: '1952935222735171586' },
        { name: '照护', pid: '1949639687672598530' },
        { name: '健康', pid: '1982746842185265153' },
        { name: '康复', pid: '1982748320488681473' },
      ]
    },
    {
      key: 'medical',
      title: '助医中心',
      desc: '专业医疗咨询与协助',
      iconType: 'emoji',
      iconText: '🏥',
      btns: [
        { name: '医疗', pid: '1982617134462328834' },//
        { name: '照护', pid: '1982033323181662209' },//
        { name: '健康', pid: '1982627191761592321' },//
        { name: '康复', pid: '1982742854299742210' },
      ]
    },
    {
      key: 'mobility',
      title: '助行中心',
      desc: '出行辅助与交通支持',
      iconType: 'emoji',
      iconText: '♿',
      btns: [
        { name: '医疗', pid: '1982618820119552002' },//
        { name: '照护', pid: '1982036400446038018' },//
        { name: '健康', pid: '1971504478850514945' },//
        { name: '康复', pid: '1982742715401170946' },
      ]
    },
    {
      key: 'case',
      title: '个案中心',
      desc: '个性化服务方案定制',
      iconType: 'img',
      iconSrc: caseIcon,
      btns: [
        { name: '医疗', pid: '1982618983395418114' },//
        { name: '照护', pid: '1976652574983086082' },//
        { name: '健康', pid: '1985726406150807553' },//
        { name: '康复', pid: '1982742854299742210' },
      ]
    },
    {
      key: 'elderly',
      title: '老年中心',
      desc: '一站式整合型重度失能老年人居家医疗照护服务',
      iconType: 'img',
      iconSrc: oldIcon,
      btns: [
        { name: '医疗', pid: '1947823460310495234' },
        { name: '照护', pid: '1982745707185631233' },
        { name: '健康', pid: '1982747373779742721' },
        { name: '康复', pid: '1982748698651324417' },
      ]
    },
  ] as const

  // 根据 configStore 中的 service_dictText 过滤可见项，并排除长期护理保险（单独渲染）
  const displayList = computed(() => baseList.value.filter(item => 
    enabledServices.value.has(item.title) && item.key !== 'longCare'
  ))
  
  // 获取长期护理保险的数据（包含分组信息）
  const longCareData = ref<any>(null)
  
  // 将数组分割成指定大小的块
  function chunkArray<T>(array: T[], size: number): T[][] {
    const chunks: T[][] = []
    for (let i = 0; i < array.length; i += size) {
      chunks.push(array.slice(i, i + size))
    }
    return chunks
  }

  // 主题样式映射
  const themeClassMap: Record<string, string> = {
    medical: 'medical-card',
    mobility: 'mobility-card',
    elderly: 'elderly-card',
    maternal: 'maternal-card',
    case: 'case-card'
  }
  
  // 获取接口方法
  const { loadTreeChildrenNew } = useNurseGoods()
  const { toGoodsDetail } = useRouterPush()

  /**
   * 将扁平数据转换为树形结构
   */
  function buildTree(list: any[], pidField = 'pid', idField = 'id', childrenField = 'children', rootValue = '0') {
    if (!list || !Array.isArray(list) || list.length === 0) {
      return []
    }

    const map: Record<string, any> = {}
    const tree: any[] = []
    let listCopy = JSON.parse(JSON.stringify(list))

    //过滤关闭状态的数据
    listCopy = listCopy.filter((item: any) => item.status != '0')

    // 创建映射表
    listCopy.forEach((item: any) => {
      map[item[idField]] = item
      item[childrenField] = []
    })

    // 构建树形结构
    listCopy.forEach((item: any) => {
      const parent = map[item[pidField]]
      
      if (parent) {
        parent[childrenField].push(item)
      } else if (item[pidField] === rootValue || !item[pidField]) {
        tree.push(item)
      }
    })

    // 递归排序：按 sid 从小到大排序
    function sortBySid(nodes: any[]) {
      nodes.forEach(node => {
        if (node[childrenField] && node[childrenField].length > 0) {
          // 对子节点按 sid 排序（sid 为空或 null 的排在最后）
          node[childrenField].sort((a: any, b: any) => {
            const sidA = a.sid !== null && a.sid !== undefined ? Number(a.sid) : Infinity
            const sidB = b.sid !== null && b.sid !== undefined ? Number(b.sid) : Infinity
            return sidA - sidB
          })
          // 递归处理子节点
          sortBySid(node[childrenField])
        }
      })
    }

    // 对根节点排序
    tree.sort((a, b) => {
      const sidA = a.sid !== null && a.sid !== undefined ? Number(a.sid) : Infinity
      const sidB = b.sid !== null && b.sid !== undefined ? Number(b.sid) : Infinity
      return sidA - sidB
    })

    // 递归排序所有子节点
    sortBySid(tree)

    // 清理空的 children 数组
    function cleanEmptyChildren(nodes: any[]) {
      nodes.forEach(node => {
        if (node[childrenField] && node[childrenField].length === 0) {
          delete node[childrenField]
        } else if (node[childrenField] && node[childrenField].length > 0) {
          cleanEmptyChildren(node[childrenField])
        }
      })
    }

    cleanEmptyChildren(tree)
    return tree
  }

  /**
   * 获取热门推荐服务列表
   */
  const getHotRecommendList = async () => {
    try {
      const hospitalId = PlatformUtils.getHospitalId() || '1'
      
      if (!hospitalId) {
        // console.warn('未找到 hospitalId，使用默认数据')
        baseList.value = []
        // 更新长期护理保险数据
        const longCareItem = baseList.value.find(item => item.key === 'longCare')
        longCareData.value = longCareItem || null
        return
      }

      const res = await request.get('/hot_recommend/hotRecommend/listByHospitalId', {
        hospitalId
      }, {
        useErrMsg: true
      })

      if (res.error) {
        throw new Error(res.error.message || '请求失败')
      }

      const data = res.success as any
      
      if (data && Array.isArray(data)) {
        // 转换为树形结构
        const treeData = buildTree(data)
        console.log('热门推荐树形数据:', treeData)
        
        // 转换接口数据为组件需要的格式
        baseList.value = transformApiDataToBaseList(treeData)
        console.log('转换后的baseList:', baseList.value)
        
        // 更新长期护理保险数据
        const longCareItem = baseList.value.find(item => item.key === 'longCare')
        longCareData.value = longCareItem || null
        console.log(longCareData.value, 'longCareData====', enabledServices.value)
      } else if (data?.result && Array.isArray(data.result)) {
        // 兼容返回格式为 { result: [...] } 的情况
        const treeData = buildTree(data.result)
        console.log('热门推荐树形数据:', treeData)
        
        baseList.value = transformApiDataToBaseList(treeData)
        console.log('转换后的baseList:', baseList.value)
        
        // 更新长期护理保险数据
        const longCareItem = baseList.value.find(item => item.key === 'longCare')
        longCareData.value = longCareItem || null
        console.log(longCareData.value, 'longCareData====', enabledServices.value)
      } else {
        // console.warn('接口返回数据格式不正确，使用默认数据')
        baseList.value = []
        
        // 更新长期护理保险数据
        const longCareItem = baseList.value.find(item => item.key === 'longCare')
        longCareData.value = longCareItem || null
      }
    } catch (error) {
      // console.error('获取热门推荐数据失败:', error)
      // 失败时使用默认数据
      baseList.value = []
      
      // 更新长期护理保险数据
      const longCareItem = baseList.value.find(item => item.key === 'longCare')
      longCareData.value = longCareItem || null
    }
  }

  /**
   * 将接口数据转换为 baseList 格式
   */
  function transformApiDataToBaseList(treeData: any[]) {
    // 图标映射
    const iconMap: Record<string, any> = {
      '母婴中心': { iconType: 'img', iconSrc: newIcon },
      '助医中心': { iconType: 'emoji', iconText: '🏥' },
      '助行中心': { iconType: 'emoji', iconText: '♿' },
      '个案中心': { iconType: 'img', iconSrc: caseIcon },
      '老年中心': { iconType: 'img', iconSrc: oldIcon },
      '长期护理保险定点机构照护服务': { iconType: 'emoji', iconText: '🏥' },
    }

    // key 映射
    const keyMap: Record<string, string> = {
      '母婴中心': 'maternal',
      '助医中心': 'medical',
      '助行中心': 'mobility',
      '个案中心': 'case',
      '老年中心': 'elderly',
      '长期护理保险定点机构照护服务': 'longCare',
    }

    return treeData.map(item => {
      const title = item.name
      const icon = iconMap[title] || { iconType: 'emoji', iconText: '📋' }
      const key = keyMap[title] || title
      
      // 如果是长期护理保险定点机构照护服务，需要按 gid 分组
      if (title === '长期护理保险定点机构照护服务') {
        const children = item.children || []
        // 按 gid 分组
        const groupedByGid: Record<string, any[]> = {}
        children.forEach((child: any) => {
          const gid = child.gid || 'default'
          if (!groupedByGid[gid]) {
            groupedByGid[gid] = []
          }
          groupedByGid[gid].push(child)
        })
        
        // 将分组后的数据转换为 btns 数组，并添加分组信息
        const groupedBtns = Object.keys(groupedByGid).map(gid => ({
          gid,
          items: groupedByGid[gid].map((child: any) => ({
            name: child.name,
            pid: child.link
          }))
        }))

        return {
          key,
          title,
          desc: item.desc || title,
          ...icon,
          btns: children.map((child: any) => ({
            name: child.name,
            pid: child.link
          })),
          groupedBtns // 分组后的数据，用于长期护理保险的特殊显示
        }
      } else {
        // 其他服务直接提取子节点作为 btns
        const btns = (item.children || []).map((child: any) => ({
          name: child.name,
          pid: child.link
        }))

        return {
          key,
          title,
          desc: item.desc || title,
          ...icon,
          btns
        }
      }
    })
  }

  setTimeout(() => {
    // console.log(enabledServices.value, 'enabledServices #####')
  }, 1200)
  
  /**
   * 获取服务列表数据
   * @param pid - 父级ID
   */
  const getServiceList = async (pid = '') => {
    loading.value = true
    try {
      const { error, success } = await loadTreeChildrenNew({ pid: pid || '1949639687672598530' })
      if (!error && success) {
        serviceList.value = success
      }
    } finally {
      loading.value = false
    }
  }
  
  /**
   * 挂载时获取数据
   */
  onMounted(() => {
    // 获取热门推荐列表
    getHotRecommendList()
    // 获取默认服务列表数据
    getServiceList()
  })
  
  /**
   * 处理服务卡片点击事件
   * @param serviceType - 服务类型
   * @param pid - 父级ID，用于获取对应的服务列表
   */
  const handleServiceClick = async (serviceType: keyof ServiceType, pid = '') => {
    // console.log('handleServiceClick 被调用:', serviceType, pid);
    const serviceName = serviceMap[serviceType]
    // console.log(serviceName, 'serviceName')
    currentService.value = {
      type: serviceType,
      name: serviceName,
    }
    showModal.value = true
    
    // 根据 pid 获取对应的服务列表数据
    await getServiceList(pid)
    
    // 触发自定义事件，让父组件处理跳转逻辑
    emit('serviceClick', {
      type: serviceType,
      name: serviceName,
    })
  }
  
  /**
   * 处理商品项目点击
   * @param item - 商品项目
   */
  const handleItemClick = (item: GoodsItem) => {
    toGoodsDetail({
      id: String(item.id),
      pic: item.pic,
      pname: item.goods_name || item.type_name || item.typeName,
      unit: item.unit,
      nurseType: '2',
      goods_type: '1',
      nurseTypeText: item.goods_name || item.type_name || item.typeName
    })
  }
  
  /**
   * 处理长期护理保险服务点击
   * @param serviceName - 服务名称
   */
  const handleCareClick = async (serviceName: string, pid: string) => {
    // console.log('handleCareClick 被调用:', serviceName);
    selectedCareTag.value = serviceName;
    // console.log(serviceName, 'serviceName')
    currentService.value = {
      type: 'longCare',
      name: serviceName,
    }
    showModal.value = true
    await getServiceList(pid)

    // 处理长期护理保险服务的点击逻辑，可以根据需要跳转到对应页面或显示详情
    // 这里暂时输出日志，后续可以根据业务需求完善
  }
  
  /**
   * 关闭模态框
   */
  const closeModal = () => {
    showModal.value = false
    currentService.value = null
  }
  
  // 定义事件
  const emit = defineEmits<{
    serviceClick: [payload: { type: keyof ServiceType; name: string }]
  }>()
  </script>
  
  <style lang="scss">
  .popular-services {
    width: 100%;
    padding: 32rpx 24rpx;
    background: #fff;
    // min-height: 100vh;
    box-sizing: border-box;
  }

  .mu-wz {
    font-size: 28rpx;
    font-weight: 700;
    position: absolute;
    top: 8rpx;
    right: 142rpx;
    color: #ce60b8;
  }
  .ying-wz {
    font-size: 28rpx;
    font-weight: 700;
    position: absolute;
    top: 8rpx;
    right: 105rpx;
    color: #ce60b8;
  }
  
  // 标题区域
  .services-header {
    width: 100%;
    margin-bottom: 48rpx;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    box-sizing: border-box;
    
    .header-content {
      flex: 1;
      
      .title-text {
        display: block;
        font-size: 32rpx;
        font-weight: 700;
        color: #1e293b;
        margin-bottom: 8rpx;
        line-height: 1.2;
      }
      
      .subtitle-text {
        font-size: 26rpx;
        color: #64748b;
        font-weight: 400;
        line-height: 1.4;
      }
    }
    
    .header-decoration {
      display: flex;
      flex-direction: column;
      gap: 8rpx;
      
      .decoration-circle {
        width: 20rpx;
        height: 20rpx;
        border-radius: 50%;
        background: linear-gradient(135deg, #3b82f6, #8b5cf6);
        
        &:last-child {
          background: linear-gradient(135deg, #8b5cf6, #ec4899);
        }
      }
    }
  }
  
  .services-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24rpx;
    box-sizing: border-box;
  }
  
  .services-row {
    width: 100%;
    display: flex;
    gap: 20rpx;
    box-sizing: border-box;
  }
  
  // 通用卡片样式
  .service-card {
    flex: 1;
    height: 180rpx;
    padding-bottom: 60rpx;
    border-radius: 16rpx;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    box-sizing: border-box;
    
    &:active {
      transform: scale(0.98);
    }
    
    .card-content {
      width: 100%;
      height: 100%;
      padding: 20rpx 24rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
    }
    
    .card-text {
      flex: 1;
      min-width: 0;
      
      .card-title {
        display: block;
        font-size: 30rpx;
        font-weight: 600;
        color: #1e293b;
        margin-bottom: 4rpx;
        line-height: 1.2;
      }
      
      .card-desc {
        display: block;
        font-size: 22rpx;
        color: #64748b;
        font-weight: 400;
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
    
    .card-icon {
      font-size: 48rpx;
      line-height: 1;
      flex-shrink: 0;
      margin-left: 16rpx;
    }
  }
  
  // 大卡片样式
  .service-card-large {
    width: 100%;
    height: 180rpx;
    border-radius: 16rpx;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    box-sizing: border-box;
    padding-bottom: 60rpx;
    
    &:active {
      transform: scale(0.98);
    }
    
    .card-content {
      width: 100%;
      height: 100%;
      padding: 20rpx 24rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
    }
    
    .card-main {
      display: flex;
      align-items: center;
      flex: 1;
      min-width: 0;
    }
    
    .card-text {
      flex: 1;
      min-width: 0;
      
      .card-title {
        display: block;
        font-size: 34rpx;
        font-weight: 700;
        color: #1e293b;
        margin-bottom: 4rpx;
        line-height: 1.2;
      }
      
      .card-desc {
        display: block;
        font-size: 24rpx;
        color: #64748b;
        font-weight: 400;
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
    
    .card-icon {
      font-size: 56rpx;
      line-height: 1;
      flex-shrink: 0;
      margin: 0 20rpx;
    }
    
    .card-badge-large {
      background: linear-gradient(135deg, #f59e0b, #ec4899);
      padding: 6rpx 14rpx;
      border-radius: 14rpx;
      box-shadow: 0 3rpx 10rpx rgba(245, 158, 11, 0.3);
      flex-shrink: 0;
      
      .badge-text {
        font-size: 18rpx;
        font-weight: 600;
        color: #fff;
        white-space: nowrap;
      }
    }
  }
  
  // 各卡片颜色主题
  .medical-card {
    background: linear-gradient(135deg, #dbeafe, #eff6ff);
  }
  
  .mobility-card {
    background: linear-gradient(135deg, #e0e7ff, #ede9fe);
  }
  
  .case-card {
    background: linear-gradient(135deg, #fef3c7, #fef7ed);
  }
  
  .maternal-card {
    background: linear-gradient(135deg, #fce7f3, #fdf2f8);
  }
  
  .elderly-card {
    background: linear-gradient(135deg, #dcfce7, #f0fdf4);
  }
  
  // 模态框样式
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(8rpx);
    animation: fadeIn 0.3s ease;
  }
  
  .modal-content {
    width: 100%;
    max-height: 80vh;
    background: #fff;
    border-radius: 24rpx 24rpx 0 0;
    overflow: hidden;
    animation: slideUp 0.3s ease;
    box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.15);
  }
  
  .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32rpx 32rpx 24rpx;
    border-bottom: 1rpx solid #f1f5f9;
    
    .modal-title {
      font-size: 36rpx;
      font-weight: 700;
      color: #1e293b;
    }
    
    .modal-close {
      width: 48rpx;
      height: 48rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: #f1f5f9;
      
      .close-icon {
        font-size: 32rpx;
        color: #64748b;
        font-weight: 300;
      }
    }
  }
  
  .modal-body {
    padding: 24rpx 32rpx 40rpx;
    max-height: calc(80vh - 120rpx);
    overflow-y: auto;
  }
  
  .service-list {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
    padding-bottom: 180rpx !important;
  
  }
  .gos {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  @keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

.card-tags {
  display: flex;
  gap: 12rpx;
  position: absolute;
  bottom: 20rpx;
  right: 20rpx;
  z-index: 10;
  pointer-events: auto;
  
  .card-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rpx 10rpx;
    border-radius: 10rpx;
    background: #3f9642c7;
    font-size: 24rpx;
    color: #fff;
    font-weight: 400;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
    
    &:active {
      transform: scale(0.95);
      background: #2d7a30c7;
    }
  }
}
  .long-care {
    &.card-tags {
      width: 100%;
      box-sizing: border-box;
      padding: 0 20rpx;
      right: 0 !important;
    }
  }
  
  // 长期护理保险卡片样式
  .long-care-card {
    width: 100%;
    height: auto;
    min-height: 200rpx;
    // padding-bottom: 80rpx;
    border-radius: 16rpx;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    box-sizing: border-box;
    background: linear-gradient(135deg, #dcf6fc, #f0fdfc);
    
    &:active {
      transform: scale(0.98);
    }
    
    .card-content {
      width: 100%;
      padding: 20rpx 24rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
    }
    
    .card-main {
      display: flex;
      align-items: center;
      flex: 1;
      min-width: 0;
    }
    
    .card-text {
      flex: 1;
      min-width: 0;
      
      .card-title {
        display: block;
        font-size: 30rpx;
        font-weight: 700;
        color: #1e293b;
        margin-bottom: 4rpx;
        line-height: 1.2;
      }
      
      .card-desc {
        display: block;
        font-size: 24rpx;
        color: #64748b;
        font-weight: 400;
        line-height: 1.3;
      }
    }
    
    .card-icon {
      font-size: 56rpx;
      line-height: 1;
      flex-shrink: 0;
      margin-left: 16rpx;
    }
    
    .long-care-content {
      padding: 24rpx;
      display: flex;
      flex-direction: column;
      gap: 24rpx;
      box-sizing: border-box;
      transform: translateY(-15rpx);
    }
    
    .care-category {
      display: flex;
      align-items: flex-start;
      gap: 24rpx;
      
      .category-title {
        font-size: 30rpx;
        font-weight: 700;
        color: #166534;
        line-height: 1.2;
        white-space: nowrap;
        padding-top: 4rpx;
      }
      
      .category-tags-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 12rpx;
      }
      
      .category-tags-row {
        display: flex;
        flex-wrap: wrap;
        gap: 12rpx;
        
        .care-tag {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 4rpx 10rpx;
          border-radius: 10rpx;
          background: #3f9642c7;
          font-size: 24rpx;
          color: #fff;
          font-weight: 400;
          cursor: pointer;
          user-select: none;
          transition: all 0.2s ease;
          white-space: nowrap;
          
          &:active {
            transform: scale(0.95);
            background: #2d7a30c7;
          }
        }
      }
    }
  }
  </style>